<template>
  <section class="register">
    <div class="logo">
      <img src="../../assets/img/logo.png" alt="">
    </div>
    <div class="login-box">
      <form class="form-input">
        <div style="border-bottom: 1px solid #eeeeee">
          <x-input  :placeholder="$t('name1')" v-model="name">
            <i class="iconfont iconfont1" slot="label" >&#xe65a;&nbsp;</i>
          </x-input>
        </div>
        <div style="border-bottom: 1px solid #eeeeee">
          <x-input :max="13" v-model="account" :placeholder="$t('account')">
            <i class="iconfont iconfont1" slot="label" >&#xe65a;&nbsp;</i>
          </x-input>
        </div>
        <div style="border-bottom: 1px solid #eeeeee">
          <x-input :max="13" v-model="phone" :placeholder="$t('phone')">
            <i class="iconfont iconfont1" slot="label" >&#xe65a;&nbsp;</i>
          </x-input>
        </div>
        <div style="border-bottom: 1px solid #eeeeee">
          <x-input  type="password"  v-model="pwd" :placeholder="$t('pwd')">
            <i class="iconfont iconfont1" slot="label">&#xe62d;&nbsp;</i>
          </x-input>
        </div>
        <div style="border-bottom: 1px solid #eeeeee">
          <x-input  type="password"  v-model="pwd1" :placeholder="$t('confirm pwd')" :equal-with="pwd">
            <i class="iconfont iconfont1" slot="label">&#xe62d;&nbsp;</i>
          </x-input>
        </div>
      </form>
      <div id="check_css3">
        <span><input type="checkbox" class="input_check" id="check3" v-model="checked"><label for="check3"></label></span>
        <p  @click="Checked">{{$t('i haven readen')}} <span @click="agree">《{{$t('user agreement')}}》</span></p>
      </div>
      <x-button :gradients="buttonColor" @click.native="doNext">{{$t('register')}}</x-button>
      <div v-transfer-dom>
        <alert v-model="show"  @on-hide="onHide"> {{ $t('register success')}}</alert>
      </div>
    </div>
  </section>
</template>

<i18n>
  account:
    en: Account
    zh-CN: 请输入账号
  phone:
    en: Phone
    zh-CN: 请输入手机号
  name1:
    en: NickName
    zh-CN: 请输入昵称
  pwd:
    en: Password
    zh-CN: 请输入密码
  confirm pwd:
    en: Confirm Password
    zh-CN: 请输入确认密码
  register:
    en: Register
    zh-CN: 注册
  i haven readen:
    en: i had readen and agreen
    zh-CN: 我已阅读并同意
  user agreement:
    en: User Agreement
    zh-CN: 用户注册协议
  register success:
    en: Register Success
    zh-CN: 注册成功!
</i18n>

<script>
  import {Alert, Confirm, XInput, XButton} from 'vux'
  export default {
    name: 'login',
    components: {
      XInput,
      XButton,
      Confirm,
      Alert
    },
    data () {
      return {
        show: false,
        buttonColor: ['#537fbf', '#537fbf'],
        phone: '',
        pwd: '',
        pwd1: '',
        checked: false,
        verification: '',
        name: '',
        account: ''
      }
    },

    methods: {
      Checked () {
        if (this.checked === false) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      doNext () {
        let vue = this
        let url = 'api/user/register'
        if (this.checked === true) {
          vue.get({
            url: url,
            params: {
              username: vue.account,
              mobile: vue.phone,
              password: vue.pwd,
              token: localStorage.token,
              nickname: vue.name,
              verify_password: vue.pwd1
            },
            success: function (data) {
              console.log(data)
              if (data.code === 1) {
                vue.show = true
              } else {
                vue.$vux.toast.text(data.msg, 'middle')
              }
            }
          })
        } else {
          this.$vux.toast.text('请勾选用户注册协议', 'middle')
        }
      },
      agree () {
        this.$router.push({path: '/agreement'})
      },
      onHide () {
        console.log('on hide')
        this.phone = ''
        this.pwd = ''
        this.pwd1 = ''
        this.verification = ''
        this.name = ''
        this.$router.back(-1)
      }
    }
  }
</script>

<style lang="less">
  .register {
    height: 100%;
    background-color: #fff;
    padding:0.4rem;
    box-sizing: border-box;
    .logo {
      text-align: center;
      font-size: 40px;
      /*padding-top:1rem;*/
      img{
        height: 2rem;
        width: 2rem;
      }
    }
    .form-input {
      padding: 15px 0;
      padding-bottom: 0;
      div{
        .vux-x-input{
          height: 0.5rem;
          padding-left: 0.1rem;
          padding-bottom: 0.1rem;
          padding-top: 0.6rem;
          font-size: 0.26rem;
          input{
            height: 0.5rem;
          }
          input::-webkit-input-placeholder {
            color: #bbbbbb !important;
            font-size: 0.28rem;
          }
        }
        .iconfont1{
          border-right:1px solid #dddddd ;
          font-size: 0.33rem;
        }
        .weui-btn:after{
          border: none;
        }
      }
      button{
        background-color: white;
        border: 1px  solid  #57a94f;
        color: #57a94f;
        width: 1.5rem;
        height: 0.48rem;
        line-height: 0.48rem;
        font-size: 0.24rem;
        padding: 0;
        margin-bottom: 0.1rem;
      }
    }
    .tip {
      padding-top:0.59rem;
      text-align: center;
      font-size: 0.26rem;
      span{
        color: #537fbf;
      }
    }
    #check_css3 {margin:0.29rem auto;padding-bottom:0.89rem;padding-left: 0.12rem}
    #check_css3>span {position: relative;float: left;top: 0.1rem}
    #check_css3 .input_check {position: absolute;visibility: hidden;}
    #check_css3 .input_check+label {display: inline-block;width: 12px;height: 12px;border: 1px solid #2cb048;}
    #check_css3 .input_check:checked+label{
      background-color: #2cb048;
    }
    #check_css3 .input_check:checked+label:after {
      content: "";
      position: absolute;
      left: 1px;
      bottom: 10px;
      width: 8px;
      height: 4px;
      border: 2px solid #ffffff;
      border-top-color: transparent;
      border-right-color: transparent;
      -ms-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -webkit-transform: rotate(-60deg);
      transform: rotate(-45deg);}
    #check_css3 p{
      float: left;
      color: #676767;
      font-size: 0.24rem;
      padding-left: 0.24rem;
      margin-top: 0.07rem;
      line-height: 1.3;
    }
  }

</style>
